<template>
<div class="radio-button-group-root">
  <div class="radio-button" v-for="(item, i) in datas" :key="i">
    <div class="content" 
      :class="{active: i == iindex}"
      @click="success(item)">{{item}}</div>
  </div>
  <div v-if="set==true" class="survey" @click="gosurvey()"></div>
</div>
</template>

<script>
export default {
  name: 'radio-button-group',
  props: ['datas','sIndex','checked','set'],
  data(){
    return {
      index: 0
    }
  },
  computed:{
    iindex(){
      return this.datas.indexOf(this.checked)
    },
  },
  methods:{
    success:function(item){
      this.$store.commit('getScreenings',{
        index:this.sIndex,
        value:item
      });
    },
    gosurvey(){
      this.$router.push('/directional')
    }
  }
}
</script>

<style lang="stylus" scoped>
.radio-button-group-root
  overflow hidden
  width 100vw

.radio-button
  float left
  width 7vw
  >.content
    height 2rem
    line-height @height
    border-radius 0.31rem
    display inline-block
    padding 0 0.88rem
    cursor pointer
    white-space nowrap
    &.active
      background-color #e85a47
      color white
.survey
  display inline-block
  background url('img/survey-set.png') no-repeat
  width 7vw
  height 4.5rem
  background-size 22px 22px
  background-position 0.88rem 0.9rem
  cursor pointer
</style>